<template>
  <div>
    <div class="header_top">
      <div class="mark_head">
        <span class="ant-card-head">邀约到课看板</span>
        <span style="float: right; padding: 3px 0;color: red;">{{state}}</span>
      </div>
    </div>
    <div class="screen_data">
      <el-row :gutter="15">
        <el-col :span="4">
          <div class="ant-statistic-title">总邀约</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ yaoyue }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">总到课</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ daoke }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">到课率</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ daokelv }}</span>
          </span>
          </div>
        </el-col>

      </el-row>
      <el-row :gutter="15">
        <el-col :span="4">
          <div class="ant-statistic-title">直播间总成交</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ chengjiao }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">直播间转化率</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ chengjiaolv }}</span>
          </span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="ant-statistic-title">邀约转化率</div>
          <div class="ant-statistic-content" style="font-weight: 700;">
          <span class="ant-statistic-content-value">
            <span class="ant-statistic-content-value-int">{{ yaoyuelv }}</span>
          </span>
          </div>
        </el-col>
        
      </el-row>
    </div>
  </div>


</template>

<script>

  import { daokekanban } from '@/api/live/attendance';

  export default {
    components: {},
    data() {
      return {
        yaoyue:0,
        daoke:0,
        chengjiao:0,
        daokelv:0,
        chengjiaolv:0,
        yaoyuelv:0,
      }
    },
    created() {
      this.init();
    },
    methods: {
      init(){
        let _param = {
            
        }
        daokekanban(_param).then((res) => {
            if (res.code == 200) {
                this.yaoyue = res.data.yaoyue;
                this.daoke = res.data.daoke;
                this.chengjiao = res.data.chengjiao;
                this.daokelv = res.data.daokelv;
                this.chengjiaolv = res.data.chengjiaolv;
                this.yaoyuelv = res.data.yaoyuelv;
            } else {
                msgError(res.msg);
            }
        })
      },
    }
  }
</script>

<style>
  .el-row {
    padding: 10px;
  }
  .screen_data {
    padding: 0 10px;
    margin: 10px 0;
  }
  .header_top {
    padding: 15px;
    background-color: #ecf5ff;
    border-color: #d9ecff;
    color: #409EFF;
    font-size: 14px;
    border-bottom: 1px #cccccc solid;
  }
  .mark_head {
    position: relative;
    padding-left: 12px;
    border-left: 4px #e6533c solid;
  }

  .flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .ant-statistic-title {
    margin-bottom: 4px;
    color: rgba(0,0,0,.45);
    font-size: 14px;
  }
  .ant-statistic-content {
    color: rgba(0,0,0,.85);
    font-size: 24px;
    line-height: 1.5;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

  }
  .ant-statistic-content-suffix {
    margin-left: 4px;
    font-size: 16px;
  }
  .ant-card-head {
    color: rgba(0,0,0,.85);
    font-weight: 500;
    font-size: 16px;
  }
  .time {
    color: #999;
    font-size: 12px;
    margin-left: 20px;
  }

  .card_content{
    display: flex;
    flex-direction: column;
    flex: content;
    height: 200px;
    color: #fff;
    padding: 12px;
    height: 169px;
    border-radius: 8px;
    /* position: relative; */
    background: linear-gradient(90deg,#e6533c 3.92%,#eb7151 90.3%);
    box-sizing: border-box;
  }

  .card_img{
    width: 250px;
    height: 80px;
    justify-content: right;
    display: flex;
  }

  .img_content{
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
   
  .card_jine_content{
    display: flex;
    justify-content: space-between;
    height:100px;
    width: 100%;
    font-size: large;
    font-weight: bold;
  }

  .t_contne{
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: large;
    font-weight: bold;
    margin-top: 10px;
  }
  .t_contne2{
    display: flex;
    width: 100%;
    font-size: 25pt;
    font-weight: bold;
  }
</style>
